<template>
  <div>
    <MyHeader title="购物车案例"></MyHeader>
    <div class="main">
      <MyGoods 
      :list="goodsList" 
      @addCount="addFn" 
      @count="counFn"
      @edit="editItem"
      @enter='enterFn'></MyGoods>
    </div>
    <MyFooter :list='goodsList'
    @change='changeFn'
 ></MyFooter>
  </div>
</template>

<script>
import axios from "axios";
import MyHeader from "./components/MyHeader";
import MyGoods from "./components/MyGoods";
import MyFooter from "./components/MyFooter";
export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  data() {
    return {
      goodsList: [],
    isShow:true,
    show:false,
    list:[]
    };
  },
  methods:{
      addFn(id) {
        // console.log(id);
        const data = this.goodsList.find(item => item.id === id)
        data.goods_count++
      },
      counFn(id) {
        console.log(id);
        const data = this.goodsList.find(item => item.id === id)
        if(data.goods_count != 0) {
          data.goods_count--
        }
        // console.log(data);
      },
      
     changeFn(v) {
      console.log(v);
      this.goodsList.forEach(item => item.goods_state = v)
     },
     editItem(id) {
      console.log(id);
      const data = this.goodsList.find(item => item.id === id)
      // console.log(data);
      data.goods_state = !data.goods_state
     },
     enterFn(id,value) {
      console.log(id,value);
      const data = this.goodsList.find(item => item.id === id)
      data.goods_count = +value
     }

  }, 

  
  async created() {
    const {
      data: { list },
    } = await axios.get(`https://www.escook.cn/api/cart`);
    this.goodsList = list;
    console.log(this.goodsList);
  },
  
};
</script>

<style>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>